<template>
	<view class="alarmUrgent">
		<model-page>
			<Card>
				<view class="title">
					入住用户
				</view>
				<view class="infoList">
					<view class="info_row" v-for="(item,index) in infoList" :key="index">
						<text>{{item.title}}</text>
						<text>{{dataPress(item.props,infoObj[item.props])}}</text>
					</view>
				</view>
				<image src="../../../static/image/alarm/cutin.png" mode="" class="cutin"></image>
				<view class="noticeItem" v-for="(item,index) in noticeList" :key="index">
					<!-- {{index + 1+'. '}} -->{{item}}
				</view>
				<view class="noData" v-show="noticeList.length === 0">
					暂无注意事项~~~
				</view>
			</Card>
			<view class="ways">
				<view class="way_title">
					应急预案
				</view>
			  <Card>
				  <view class="alarmWays" @click="previewImage">
				  	<image :src="emergencyPlan" mode="aspectFit" v-show="emergencyPlan"></image>
					<view class="noData" v-show="!emergencyPlan">
						暂无应急预案~~~
					</view>
				  </view>
			  </Card>
			</view>
			<view class="toCurrent" @click="changeScen">
			<image :src="`../../../static/image/${postData.arriveSite === 1 ?'check_true' : 'alarm/checkNo'}.png`" class="toCurrent_icon" ></image>	已到现场
			</view>
			<Card>
				<view class="deal_result">
					处理结果
				</view>
				<view class="deal_result_content">
				<textarea v-model="postData.dealResult" placeholder="请输入处理结果" v-if="[0,2].includes(infoObj.alertStatus)"/>
				<view class="noData" v-else>
				{{infoObj.dealResult}}
				</view>	
				</view>

			</Card>
			<view class="btn_group">
				<view @click="processFlow('ing')" v-if="infoObj.alertStatus === 0">
					处理中
				</view>
				<view @click="processFlow('ed')" v-if="[0,2].includes(infoObj.alertStatus)">
					确认处理
				</view>
			</view>
		</model-page>
	</view>
	<uni-popup ref="popup" background-color="#fff" >
		 <view class="preview" style="background: url('../../../static/image/alarm/urgentBg.png')no-repeat center;background-size: 110% 100%;">
		 	<image src="../../../static/image/alarm/urgentNotice.png" mode=""></image>
			<image :src="emergencyPlan"></image>
		 </view>	
	</uni-popup>
</template>

<script setup>
	import {reactive, ref} from 'vue'
	import {onLoad} from '@dcloudio/uni-app'
	import {getAlertDetails,handlingAlert,handleAlert} from '@/api/alarm.js'
	const infoList = [
		{
			title:"姓名",
			props:"elderName"
		},
		{
			title:"房间",
			props:"roomName"
		},
		{
			title:"性别",
			props:"gender"
		},
		{
			title:"年龄",
			props:"age"
		},
	]

	// 图片预览
	const popup = ref()
	const previewImage = ()=>{
	popup.value.open()
	}
	
	// 获取告警详情
	const goScene = ref(false) //是否到现场
	const changeScen = ()=>{
		goScene.value = !goScene.value
		postData.arriveSite = goScene.value ? 1 : 0
	}
	const infoObj = ref({}) //详情信息
	const getInfoDetail = async(alertId)=>{
	const {code,data:res} = await getAlertDetails({
			alertId
		})
		if(code === 200){
			infoObj.value = res
			noticeList.value = res.precautions.split("|")
			// 获取默认状态
			postData.dealResult = res.dealResult || ""
			postData.arriveSite = res.alertStatus
			emergencyPlan.value = res.emergencyPlan
			    uni.setNavigationBarTitle({
			      title:res.alertTypeName

			    })
			
		}
	}
	onLoad((option)=>{
		const {alertId} = option
		console.log("fdsfas",option);
		postData.alertId = alertId
		getInfoDetail(alertId)
	})
	// 数据类型处理
	const dataPress = (props,data)=>{
		let str = ""
		switch (props){
			case "gender":
			str = data === "0" ? "男" : "女"
			break;
			default:
			str = data
		}
		return str
	}
 const noticeList = ref([]) //注意事项
 const emergencyPlan = ref("") //预警方案
 // 处理告警信息
 const postData = reactive({
	   alertId: 0,
	   arriveSite: '0',
	   dealResult: "",
	   alertStatus: 0
 })
 // 前往告警流程
 const processFlow = async(type)=>{
 	switch (type){
 		case 'ing':
		postData.alertStatus = 2
 		break;
 		case 'ed':
		postData.alertStatus = 1
 		break;
 	}
	const {code,data:res,msg} = await handleAlert(postData)
	if(code === 200){
		if(res){
			uni.showToast({
				icon:"success",
				title:"操作成功",
				duration:1000,
				complete() {
				setTimeout(()=>{
				uni.navigateBack()	
				},1000)

				}
			})

		}
	}

 }
</script>

<style lang="less">
.alarmUrgent{
	background-color: #f8faff;
	.title{
		font-weight: 500;
		font-size: 32rpx;
		color: #333333;
		border-bottom:1rpx solid #AEAEAE;
		padding-bottom: 24rpx;
		margin-bottom: 24rpx;
	}
	.infoList{
		border-bottom: 1rpx dashed #AEAEAE;
		padding-bottom: 24rpx;
		margin-bottom: 24rpx;
		.info_row{
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 15rpx;
			>text{
				&:first-child{
					font-weight: 400;
					font-size: 28rpx;
					color: #999999;
				}
				&:last-child{
					font-weight: 400;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
		
	}
	.cutin{
		width: 136rpx;
		height: 40rpx;
	}
	.noticeItem{
		font-weight: 400;
		font-size: 26rpx;
		color: #666666;
		line-height: 40rpx;
	}
	.ways{
	.way_title{
		margin: 26rpx 0;
		font-size: 32rpx;
		color: #999999;
	}
		
	.alarmWays{
		display: flex;
		justify-content: center;
		padding: 30rpx 0;
		// >image{
		// 	object-fit: contain
			
		// }
	}
	
	}
		
	.toCurrent{
		margin: 30rpx 0;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		.toCurrent_icon{
			width: 28rpx;
			height: 28rpx;
			margin-right: 16rpx;
		}
	}
.deal_result{
	font-weight: 500;
	font-size: 32rpx;
	color: #333333;
	padding-bottom: 24rpx;
	border-bottom: 1rpx solid #AEAEAE;
	margin-bottom: 20rpx;
}
.deal_result_content{
	min-height: 300rpx;
}
.btn_group{
	display: flex;
	margin: 60rpx 0;
	>view{
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		border-radius: 40rpx;
		flex: 1;
		&:first-child{
			font-weight: 500;
			font-size: 32rpx;
			color: #666666;
			background: #F2F8FF;
			margin-right: 30rpx;
		}
		&:last-child{
			font-weight: 500;
			font-size: 32rpx;
			color: #FFFFFF;
			background: linear-gradient( 180deg, #74B7FF 0%, #1680F3 100%);
		}
	}
}
}
.preview{
	 width: 100%;
	 height: 100%;
	 padding: 20rpx;
	 display: flex;
	 flex-direction: column;
	 align-items: center;
 >image{
	 &:first-child{
		 width: 160px;
		 height: 190rpx;

	 }
	 &:last-child{
			 width: 100%;
	 height: 700rpx; 
	 }

 }	
}
:deep(.uni-popup__wrapper){
	height: 1000rpx;
	width: 80%;
	border-radius: 20rpx;
	overflow: hidden;
}
.noData{
	color: #999999;
	font-size: 28rpx;
	padding: 10rpx 0;
}
</style>
